<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style type="text/css">
        /*将所有标签默认的内外边距清除*/
        *{
            margin: 0px;
            padding: 0px;
            /*元素宽由width=content变为content+padding+border*/
            box-sizing: border-box;
        }
        html{
            height: 100%;
        }
        body{ /*背景图片 不重复铺设 居中*/
            background:url("img/rg_bg.jpg") no-repeat center ;
            background-size: 100% 100% ;
        }
        .rg_layout{  /*设置注册表布局框，背景颜色白色，分为三部分*/
            width: 900px;
            height: 550px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*--让div水平居中auto*/
            margin: auto;

           margin-top: 80px;

        }
        .rg_left{  /*白色注册框中左边部分*/
            /*border: 1px solid red;*/
            float: left;
            margin: 15px;
        }
        /*设置左部分p标签中文字属性*/
        .rg_left >p:first-child{ /*该类选择器下第一个p标签以及最后一个标签*/
            color:#FFD026;
            font-size: 20px;

        }
        .rg_left>p:last-child{
            color:#A6A6A6;
            font-size: 20px;

        }
        /*白色注册框中间部分*/
        .rg_center{
            /*border: 1px solid red;*/
            float: left;
            width: 540px;
        }
        /*白色注册框右边部分*/
        .rg_right{
            /*border: 1px solid red;*/
            float: right;
            margin: 15px;
        }
        /*白色注册框右边部分文字属性*/
        .rg_right>p:first-child{
            font-size: 15px;
        }
        .rg_right p a{
            color: pink;
        }
        .td_left{ /*设置注册表左列元素的属性文本右对齐以及宽高*/
            width: 100px;
            text-align: right;/*文本右对齐*/
            height: 45px;
        }
        .td_right{/*设置注册表右列左内边距使input组件与右列左边界有空间*/
            padding-left: 50px;
        }/*并集选择器*/
        #username,#password,#email,#company,#majory,#tel,#birthday{/*设置注册表右列input组件属性并让里面文字有左边距*/
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6; /*灰色*/
            border-radius: 5px; /*设置圆角*/
            padding-left: 10px; /*设置input组件内左边距*/

        }
        
        #btn_sub{   /*注册按钮属性设置*/
            width: 150px;
            height: 40px;
            background-color: #FFD026;
            border: 1px solid #FFD026;/*消除边框(颜色与按钮背景颜色同)*/
        }
        .error{    /*用户名密码验证失败所显示的文字的属性*/
            color: red;
        }
        #td_sub{  /*设置注册按钮在该行中的位置，用内边距*/
            padding-left: 150px;

        }
    </style>
    <script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    <script type="text/javascript">
	
		//校验手机号
		function checkPhoneNum(){
			var tel=$("input[name='tel']").val();
			if(tel==''){
            	$("span[id='s_tel']").html("手机不为空！").css("color", "red");
            	return false;
            }else if(/^((0\d{2,3}-\d{7,8})|(1[345789]\d{9}))$/.test(tel)==false){
            	$("span[id='s_tel']").html("手机不合法！").css("color", "red");
            	return false;
            }
            $("span[id='s_tel']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
		}
       
        //校验专业表单项非空
        function checkMajory(){
        	//获取表单项值
        	var majory=$("input[name='majory']").val();
   			if(majory==''){
            	$("span[id='s_majory']").html("专业不为空！").css("color", "red");
            	return false;
            }
            $("span[id='s_majory']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }
        

       //校验院校表单项非空
   		function checkCompany(){
   			var company=$("input[name='company']").val();
   			if(company==''){
            	$("span[id='s_company']").html("院校不为空！").css("color", "red");
            	return false;
            }
            $("span[id='s_company']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
   		}
			
        //校验邮箱方法
        function checkEmail(){
        	//1.获取邮箱内容
        	var email=$("input[name='email']").val();
        	if(email==''){
            	$("span[id='s_email']").html("邮箱不为空！").css("color", "red");
            	return false;
            }else if(/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/.test(email) == false){
            	$("span[id='s_email']").html("邮箱不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_email']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }  
        
        
        //校验密码方法
        function checkPassword(){
            //1.获取密码的值(文本输入框值)，通过name找value
            var password=$("input[name='password']").val();
            if(password==''){
            	$("span[id='s_password']").html("密码不为空！").css("color", "red");
            	return false;
            }else if(/^[a-zA-z]\w{5,}/.test(password) == false){
            	$("span[id='s_password']").html("密码不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_password']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
        }
        

        //校验用户名方法
        function checkUserName(){
            //1.获取用户名的值(文本输入框值),通过name找value
            var username=$("input[name='username']").val();
            if(username==''){
            	$("span[id='s_username']").html("用户名不为空！").css("color", "red");
            	return false;
            }else if(username.length<3){
            	$("span[id='s_username']").html("用户名不合法！").css("color", "red");
				return false;
            }
            $("span[id='s_username']").html("<img src='./img/对勾.jpg';width='23px'; height='23px'>");
			return true;
		}
        
        //就绪事件，页面都加载完成后开始执行下面代码
        $(function(){
        	//给input表单项绑定离焦事件
        	$("input[name='username']").blur(function(){ 
					checkUserName();
			}); 
			$("input[name='password']").blur(function(){ 
					checkPassword();
			});
			$("input[name='email']").blur(function(){ 
					checkEmail();
			});
			$("input[name='company']").blur(function(){ 
					checkCompany();
			});
			$("input[name='majory']").blur(function(){ 
					checkMajory();
			});
		
			$("input[name='tel']").blur(function(){ 
					checkPhoneNum();
			});
			//给表单绑定提交事件，只有返回true表单才会提交
			$("#form").submit(function() {
					return checkUserName() && checkPassword() && checkEmail()() && checkCompany() && checkMajory() && checkPhoneNum();
			});
        })
        
    </script>
</head>
<body class="body">
    <div class="rg_layout">
        <div class="rg_left">
            <p >新用户注册</p>
            <p> USER LOGIN</p>
        </div>
        <div class="rg_center">
           <div class="rg_form">
               <!--定义表单form-->
               <form action="/login" method="post" id="form">
                   <table >
                       <tr>
                           <td class="td_left"><label for="username">用户名</label></td>
                           <td class="td_right">
                               <input type="text" name="username" id="username" placeholder="请输入用户名">
                               <span id="s_username" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="password">密码</label></td>
                           <td class="td_right">
                               <input type="password" name="password" id="password" placeholder="请输入密码">
                               <span id="s_password"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="email">Email</label></td>
                           <td class="td_right">
                           		<input type="email" name="email" id="email" placeholder="请输入邮箱">
                           		<span id="s_email"class="error"></span>
                           </td>
                           
                       </tr>
                        <tr>
                           <td class="td_left"><label for="company">院校</label></td>
                           <td class="td_right">
                           		<input type="text" name="company" id="company" placeholder="请输入院校">
                           		<span id="s_company"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="majory">专业</label></td>
                           <td class="td_right">
                           		<input type="text" name="majory" id="majory" placeholder="请输入专业">
                           		<span id="s_majory" class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="tel">手机号</label></td>
                           <td class="td_right">
                           		<input type="tel" name="tel" id="tel" placeholder="请输入手机号">
                           		<span id="s_tel"class="error"></span>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>性别</label></td>
                           <td class="td_right"><input type="radio" name="gender" value="male">男
                               <input type="radio" name="gender" value="female">女
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label for="birthday">出生日期</label></td>
                           <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                       </tr>
                       <tr>
                           <td class="td_left"><label>参赛语言</label></td>
                           <td class="td_right">
                           		<select name="language">
                           			<option value="C++">C++</option>
                           			<option value="Java">Java</option>
                           			<option value="JavaScript">JavaScript</option>
                           			<option value="Python">Python</option>
                           		</select>
                           </td>
                       </tr>
                       <tr>
                           <td class="td_left"><label >协议</label></td>
                           <td class="td_right"><textarea rows="1">1. 参加全国竞赛的项目从省级竞赛获奖项目按规定名额择优推荐。2. 申报项目必须是从当年7月1日往前推不超过两年时间内完成的。</textarea></td>
                       </tr>
                           <td colspan="2" id="td_sub"><input type="submit" value="提交" id="btn_sub"></td>
                       </tr>
                   </table>
               </form>
           </div>
        </div>
        <div class="rg_right">
            <p>已有账号<a href="#">立即登录</a></p>
        </div>
    </div>
</body>
</html>